<template>
	<div class="main">
		<div class="a">

			<div class="b">帮助中心管理</div>

			<div class="c">

				<ul>
					<li>文章发布</li>

					<li>栏目管理</li>

					<li>反馈管理</li>

				</ul>

			</div>
		</div>
		<div class="d">
			<div class="tb">
				<table border="2">
					<tr>
						<th>反馈人</th>
						<th>反馈邮箱</th>
						<th>反馈类型</th>
						<th>反馈内容</th>
						<th>反馈时间</th>
						<th>是否解决</th>
						<th>是否已读</th>
						<th>操作</th>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
		
				</table>
		
			</div>
		
		</div>
	</div>
</template>

<script></script>

<style>
	.b {
		width: 200px;
		height: 50px;
		background-color: dodgerblue;
		text-align: center;
	
		line-height: 50px;
		color: #ffffff;
	}
	
	.c {
		width: 200px;
		height: 300px;
		background-color: gainsboro;
		/*visibility: hidden;*/
	}
	
	ul {
		list-style: none;
		margin-left: -40px;
	}
	
	ul li {
		line-height: 50px;
		display: block;
	
		width: 200px;
		text-align: center;
	}
	
	/* .a:hover {
		cursor: pointer;
	} */
	
	.a:hover .c {
		display: block;
	}
	
	.a:hover .b {
		background-color: dodgerblue;
		cursor: pointer;
	}
	
	li:hover {
		background-color: gray;
		color: #FFFFFF;
		cursor: pointer;
	}
	
	table {
		width: 100%;
		border-collapse: collapse;
	}
	
	table caption {
		font-size: 2em;
		font-weight: bold;
		margin: 1em 0;
	}
	
	th,
	td {
		border: 1px solid #999;
		text-align: center;
		padding: 20px 0;
	}
	
	table thead tr {
		background-color: #008c8c;
		color: #fff;
	}
	
	table tbody tr:nth-child(odd) {
		background-color: #eee;
	}
	
	table tbody tr:hover {
		background-color: #ccc;
	}
	
	table tbody tr td:first-child {
		color: #f40;
	}
	
	table tfoot tr td {
		text-align: right;
		padding-right: 20px;
	}
	
	.a {
		width: 200px;
		height: 600px;
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		padding: 3px;
		float: left;
	}
	
	.d {
		width: 1000px;
		height: 600px;
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		float: left;
		padding: 3px;
		display: flex;
	}
	.tb{
		margin-top: 300px;
		width: 1000px;
	}
	.main{
		display: flex;
		justify-content: center;
		margin-top: 80px;
	}
</style>
